<template>
	<view class="">
		<video autoplay loop :style="setHeight" objectFit="fill" class="show-video" :src="playSrc"></video>
		<view class="mes-bg"></view>
		<view class="mes-text">
			<view class="text-box">
				<view style="color: #fff;font-weight: bold;padding-bottom: 5px;">少司缘</view>
				<view style="color: #a6cafd;font-size: 12px;">游戏职业-辅助</view>
			</view>
			<view style="color: #a6cafd;font-size: 12px;margin-left: 15px">眼观六路尘缘事</view>
		</view>
		<view class="photo-show">
			<image :class="id==0?'pick':'unpick'" src="../../static/shao-half.png" @click="select(0)"></image>
			<image :class="id==1?'pick':'unpick'" src="../../static/shao-red.png" @click="select(1)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setHeight:'height:500px',
				id:0,
				playSrc:'/static/shao.mp4',
				videoList:["/static/shao.mp4","/static/shao-red.mp4"]
			}
		},
		onLoad() {
			this.getHeight()
		},
		methods: {
			select(pickId){
				this.id = pickId
				//点击的时候对应播放哪个视频
				this.playSrc = this.videoList[pickId]
			},
			getHeight(){
				let sysInfo = uni.getSystemInfoSync()
				console.log(sysInfo);
				this.setHeight = 'height:' + sysInfo.windowHeight + 'px'
			}
		}
	}
</script>

<style>
	.unpick{
		width: 60px;
		height: 80px;
		margin-top: 20px;
		margin-right: 10px;
	}
	.pick{
		width: 90px;
		height: 120px;
		margin-right: 10px;
	}
	.photo-show{
		position: absolute;
		width: 260px;
		right: 0;
		bottom: 50px;
		display: flex;
		justify-content: center;
	}
	.text-box{
		background-color: rgb(0 124 227 / 20%);
		padding: 10px 15px;
	}
	.mes-text{
		position: absolute;
		width: 245px;
		right: 0;
		top:50px;
	}
	.mes-bg{
		width: 260px;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		background: linear-gradient(to left, rgb(0 0 0 / 60%), rgb(0 0 0 / 40%),rgb(239 239 239 / 10%));
	}
	.show-video{
		width: 100%;
	}
</style>
